import { h } from 'vue';
import { NTag, NTooltip } from 'naive-ui';
import { BasicColumn } from '@/components/Table';

// 状态映射
const statusMap = {
  success: { text: '成功', type: 'success' as const },
  done: { text: '完成', type: 'success' as const },
  fail: { text: '失败', type: 'error' as const },
  init: { text: '处理中', type: 'warning' as const },
};

// 类型映射
const typeMap = {
  full: '全额转账',
  part: '部分转账',
};

export const columns: BasicColumn[] = [
  {
    title: '转出账户ID',
    key: 'account_id',
    width: 140,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '转入账户ID',
    key: 'to_account_id',
    width: 140,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '类型',
    key: 'type',
    width: 80,
    render(record) {
      const typeText = typeMap[record.type] || record.type;
      return typeText;
    },
  },
  {
    title: '转账金额',
    key: 'amount',
    width: 80,
    render(record) {
      return `¥${parseFloat(record.amount).toFixed(2)}`;
    },
  },
  {
    title: '状态',
    key: 'status',
    width: 60,
    render(record) {
      const status = statusMap[record.status] || { text: record.status, type: 'default' as const };
      return h(NTag, { type: status.type }, { default: () => status.text });
    },
  },
  {
    title: '备注',
    key: 'remark',
    width: 120,
    ellipsis: {
      tooltip: true,
    },
    render(record) {
      if (!record.remark) return '-';

      // 失败状态的备注显示红色
      const isFailStatus = record.status === 'fail';
      const displayText = record.remark.length > 20 ? `${record.remark.slice(0, 20)}...` : record.remark;

      return h(
        NTooltip,
        {},
        {
          trigger: () => h(
            'span',
            {
              style: {
                color: isFailStatus ? '#d03050' : undefined,
              },
            },
            displayText
          ),
          default: () => record.remark,
        }
      );
    },
  },
  // {
  //   title: '上游API',
  //   key: 'upstream_api',
  //   width: 120,
  //   ellipsis: {
  //     tooltip: true,
  //   },
  // },
  // {
  //   title: '第三方订单号',
  //   key: 'third_order_no',
  //   width: 140,
  //   ellipsis: {
  //     tooltip: true,
  //   },
  // },
  {
    title: '创建时间',
    key: 'created_at',
    width: 140,
  },
  {
    title: '更新时间',
    key: 'updated_at',
    width: 140,
  },
];